---
title: Background
---

import {Wrench,
	Book,
	Image,
	Globe,
	Gear,
	
} from "@phosphor-icons/react";

To edit the background of the page, click on the <Wrench className="inline-icon"/> icon and there, on the <Book className="inline-icon"/> page icon. There, you'll have the option to click on the <Image className="inline-icon"/> icon. On a computer, you can also use the `ctrl-B` shortcut.

When configuring a backgournd, you have two tabs. The <Globe className="inline-icon"/> General tab to select the type of background to use, and the <Gear className="inline-icon"/> To configure the selected background.

## <Globe className="inline-icon"/> Pattern

There are 8 different background templates available that you can choose from. For each of the available patterns, you can configure the following:

### <Gear className="inline-icon"/> Properties

In the horizontal configuration tab, you have the following option:

- Width - the width for each row respectively.
- Count - you can group the rows in group that way.
- Space - the distance between each group of rows.

For example, to create a music sheet, you can use the following configuration:
`Width - 40`, `Count - 5`, `Space - 80`

The vertical configuration follows the same logic for columns instead of rows

## <Globe className="inline-icon"/> Image

The image background type allows you to upload an image and use it as background for the page.

### <Gear className="inline-icon"/> Properties

The scale in x and y direction can be changed if this image to small or big.
